<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Google AJAX Language API - Language Detection</title>

  <style type="text/css">

  body {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    font-size: small;
    margin: 15px;
  }

  form.query-box {
    font-size: 15px;
    margin-top : 0px;
    margin-right : 0px;
    margin-bottom : 4px;
    margin-left : 0px;
    width: 100%;
  }

  input.query-input {
    padding-left : 2px;
    width: 400px;
    border: 1px solid #BCCDF0;
  }
  input.button {
    margin-top : 4px;
  }

  div#main {
    width: 800px;
  }

  div#results {
    padding-top: 20px;
    width: 800px;
  }

  div#results_title {
    color: lightgray;
    font-weight: bold;
  }

  div#results_body {
    color: gray;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  div#results_body2 {
    color: gray;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
  }

  </style>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>

<body>


<div id="main">
  <h1>Translation</h1>
  <h2>Language Detection & Translation</h2>
  <form class="query-box" onsubmit="return submitChange();">
  <input class="query-input" id="source" type="text" autocomplete="off" size="15" value="Computing Science"/>
  <input class="button" type="submit" value="Detect Language"/><br/>
  <select name="src" id="src"></select>  >>  <select name="dst" id="dst"></select>
  <input class="button" type="submit" value="Translate"/>
  </form>
</div>
<div id="results">

  <div id="results_title">Results:</div>
  <hr/>
  <div id="results_body"></div>
  <br />
  <div id="results_title">Translation:</div>
  <hr/>
  <div id="results_body2"></div>
  <br/>
</div>
<div id="main">
  <h1>Transliteration</h1>
  <h2>the sound of the words that are converted from one alphabet to the other.</h2>
  <div id='translControl'></div>
    <br>Title&nbsp;:&nbsp;<input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>

</div>
	<script type="text/javascript">
    google.load("language", "1");
    google.setOnLoadCallback(init);

    function init() {
	  var src = document.getElementById('src');
      var dst = document.getElementById('dst');
	  var i=0;
      for (l in google.language.Languages) {
        var lng = l.toLowerCase();
        var lngCode = google.language.Languages[l];
        if (google.language.isTranslatable(lngCode)) {
          src.options.add(new Option(lng, lngCode));
          dst.options.add(new Option(lng, lngCode));
        }
	  }
      submitChange();
    }

    function submitChange() {
      var value = document.getElementById('source').value;
	  var src = document.getElementById('src').value;
      var dest = document.getElementById('dst').value;
      google.language.detect(value, detectResult);
	  google.language.translate(value, src, dest, translateResult);
      return false;
    }

    function detectResult(result) {
      var resultBody = document.getElementById("results_body");
      if (result.language) {
        var language = 'unnamed';
        for (l in google.language.Languages) {
          if (google.language.Languages[l] == result.language) {
            language = l;
            break;
          }
		var sel = document.getElementById(language);
		//sel.options[sel.selectedIndex].selected = true;
        }
		var value2 = document.getElementById('source').value;
        var html =  value2 + ' is: ' + language + (result.isReliable?' ( reliable':' ( not reliable') + ' : ' + result.confidence + ')';
        resultBody.innerHTML = html;
      } else {
        resultBody.innerHTML = '<span style="color:red">Error Detecting</span>';
      }
    }

	function translateResult(result) {
      var resultBody2 = document.getElementById("results_body2");
      if (result.translation) {
        var str = result.translation.replace('>', '&gt;').replace('<', '&lt;');
        resultBody2.innerHTML = str;
      } else {
        resultBody2.innerHTML = '<span style="color:red">Error Translating</span>';
      }
    }
  </script>
 <script type="text/javascript">
      // Load the Google Transliteration API
      google.load("elements", "1", {
          packages: "transliteration"
      });
      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['hi','kn','ml','ta','te'],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = ["transl1", "transl2"];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi and also choose other destination language.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);
    </script>

</body>
</html>
